<template>
  <div class="search">
    <back></back>
    <div class="search-box">
    <el-form ref="form" :model="form">
      <el-form-item>
        <el-input v-model="form.search" :clearable="true" :placeholder="$t('vr.search')"  @keyup.enter.native="searchEnterFun"></el-input>
      </el-form-item>
    </el-form>
    <a href="javascript:;" @click="search">{{$t('vr.search')}}</a>
  </div>
    <div class="search-list">
      <p class="title">{{$t('vr.searchResults')}}</p>
      <div class="content-list">
        <router-link :to="{path:'/foundation/wap/detail/'+v.anchor,params: v.anchor}" v-for="(v,i) in dataList" :key="i">
          <el-card class="list" >
            <img :src="v.picture" width="">
            <div><p >{{v.title}}</p></div>
            <i class="el-icon-arrow-right"></i>
          </el-card>
      </router-link>
      </div>
    </div>
  </div>
</template>

<script>
  import api from "servicePath/index";
  import back from '../../../fakuma/wap/common/back'
  import { mapState } from "vuex";
export default {
  components: {
    back
  },
  data () {
    return {
      form: {
        search: ''
      },
      dataList:[],
    }
  },
  computed: {
    ...mapState(["lang"])
  },
  methods: {
    searchEnterFun (e) {
      var keyCode = window.event? e.keyCode:e.which;
      if(keyCode == 13 && this.form.search){
         this.search();
      }
    },
    async search() {
      const loading = this.$loading();
      let res = await api.getProductSearch(this.form.search,this.lang);
      this.dataList = res.data;
      loading.close();
    },
  }
}
</script>

<style lang="scss" scoped>
.search{
  padding: 0 25px;
.search-box {
  padding: 20px 0;
  display: flex;
  a {
    display: inline-block;
    font-size: 16px;
    line-height: 52px;
    margin-left: 20px;
    color: #1B1B4E;
  }
  .el-form {
    flex: auto;
    .el-input {
      /deep/input {
        height: 50px;
        border-radius: 10px;
        border: 0;
        box-shadow: 0px 5px 15px rgba(27, 27, 78, 0.1);
      }
      /deep/.el-icon-search {
        font-size: 18px;
        color: #333;
      }
    }
  }
}
.search-list{
  p{
    color: #AEB3C0;
    font-size: 14px;
  }
  .content-list{
    margin-top: 19px;
    .list{
      margin-bottom: 20px;
      /deep/.el-card__body{
        padding: 15px;
          width: 100%;
          height: 90px;
          display: flex;
          justify-content: left;
          img{
            width: 94px;
            height: 59px;
            margin-right: 10px;
          }
          div{
            display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          overflow: hidden;
            p{
            font-size: 16px;
          }
          }
         
          i{
            margin-left: auto;
            font-size: 20px;
            color: #D4DBE3;
            line-height: 60px;
          }
      }
    }
  }
}
}
</style>